<script setup lang="ts">
import StatusMenu from "~/components/toolbar/StatusMenu.vue";


const authStore = useAuthStore();
const {user} = storeToRefs(useAuthStore())

const handleLogout = () => {
  useAuthlogout()
};



</script>

<template>
  <v-menu
      :close-on-content-click="false"
      location="bottom right"
      transition="slide-y-transition"
  >
    <!-- ---------------------------------------------- -->
    <!-- Activator Btn  头像按钮 -->
    <!-- ---------------------------------------------- -->
    <template v-slot:activator="{ props }">
      <v-btn class="mx-2" v-bind="props">
        <v-badge content="2" color="success" dot bordered>
          <v-avatar size="40">
            <v-img
                :src="authStore.getAvatar_file_url"
            ></v-img>
          </v-avatar>
        </v-badge>
      </v-btn>

    </template>
    <v-card max-width="300">

      <v-list lines="three" density="compact">
        <!-- ---------------------------------------------- -->
        <!-- Profile Area -->
        <!-- ---------------------------------------------- -->
        <v-list-item to="/user/profile" density="compact">
          <template v-slot:prepend>
            <v-avatar size="40">
              <v-img
                  :src="authStore.getAvatar_file_url"
              ></v-img>
            </v-avatar>
          </template>

          <v-list-item-title class="font-weight-bold text-primary">
            {{ authStore.user?.nickname ? authStore.user?.nickname : authStore.user?.username }}
            <StatusMenu/>
          </v-list-item-title>
          <!-- <v-list-item-subtitle> -->
          <!-- {{ $store.state.user.email  }} -->
          <!-- Recently logged:
          {{authStore.userInfo.last_login_date}}
        </v-list-item-subtitle> -->
          <!--          算力余额显示-->
          <span class="text-caption">算力额度：{{ user.balance || 0 }}</span>
        </v-list-item>
      </v-list>
      <v-divider/>
      <!-- ---------------------------------------------- -->
      <!-- Menu Area -->
      <!-- ---------------------------------------------- -->
      <!-- ---------------------------------------------- -->
      <!-- Logout Area -->
      <!-- ---------------------------------------------- -->
      <v-list variant="flat" elevation="0" :lines="false" density="compact">
<!--        充值算力-->
        <v-list-item
            link
            to="/pay/account"
            density="compact"
        >
          <template v-slot:prepend>
            <v-avatar size="30">
              <v-icon>mdi-currency-usd</v-icon>
            </v-avatar>
          </template>

          <div>
            <v-list-item-subtitle class="text-body-2">
              充值算力
            </v-list-item-subtitle>
          </div>
        </v-list-item>
<!--        管理后台-->
        <v-list-item
            v-show="authStore.user?.role?.includes('admin')"
            link
            to="/admin/usermanage"
            density="compact"
        >
          <template v-slot:prepend>
            <v-avatar size="30">
              <v-icon>mdi-account-key</v-icon>
            </v-avatar>
          </template>

          <div>
            <v-list-item-subtitle class="text-body-2">
              管理后台
            </v-list-item-subtitle>
          </div>
        </v-list-item>
        <v-list-item
            link
            @click="handleLogout"
            density="compact"
        >
          <template v-slot:prepend>
            <v-avatar size="30">
              <v-icon>mdi-logout</v-icon>
            </v-avatar>
          </template>

          <div>
            <v-list-item-subtitle class="text-body-2">
              退出登录
            </v-list-item-subtitle>
          </div>
        </v-list-item>
      </v-list>
    </v-card>
  </v-menu>
</template>

<style scoped lang="scss">
// ::v-deep .v-list-item__append,
// ::v-deep .v-list-item__prepend {
//   height: 100%;
// }
</style>
